<template>
  <div>
    <van-row>
      <van-col span="24"><font size="5" color="#6495ed"><b>公告发布</b></font></van-col>
    </van-row>
    <el-form ref="form" :model="form">
    <van-row style="padding-top: 20px">
      <van-col span="12">

          <el-form-item label="内容标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-col :span="11">
              <el-date-picker
                  v-model="form.date"
                  type="date"
                  placeholder="选择时间"
                  style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="优先级">
            <el-select v-model="form.level" placeholder="消息级别">
              <el-option label="高级" value="高级"></el-option>
              <el-option label="中级" value="高级"></el-option>
              <el-option label="普通" value="普通"></el-option>
            </el-select>
          </el-form-item>

      </van-col>
      <van-col span="12">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="消息类型">
            <el-select v-model="form.noticetype" placeholder="消息类型">
              <el-option label="通知消息" value="通知消息"></el-option>
              <el-option label="公告消息" value="公告消息"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-col :span="11">
              <el-date-picker
                  v-model="form.edate"
                  type="date"
                  placeholder="选择时间"
                  style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="通告类型">
            <el-select v-model="form.type" placeholder="告知员工">
              <el-option label="指定员工" value="1" @click="form.type=='1' ? selectapprover():show2=false"></el-option>
              <el-option label="指定部门" value="2" @click="form.type=='2' ? selectapprover():show2=false"></el-option>
              <el-option label="全体员工" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <el-form-item>
          <el-form-item label="内容文本">
            <el-input v-model="form.content" type="textarea"></el-input>
          </el-form-item>
          <div>
            <Fidtor />
          </div>
          <el-button type="primary" @click="add">提交</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </van-col>
    </van-row>
    </el-form>
    <div>
      <el-dialog v-model="show2">
        <el-tree
            ref="tree"
            :data="data1"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            :props="defaultProps"
            @check="selectid"
        />
        <van-button @click="sureapprover">确认员工</van-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import myaxios from "../../../https/myaxios";
import Fidtor from "@/components/lab/fidtor";

export default {
  name: "Announcement",
  components:{
    Fidtor
  },
  data(){
    return{
      form:{
        title:'',
        noticetype:'',
        date:'',
        edate:'',
        level:'',
        type:'',
        content:''
      },
      data1:[],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      // 选择审批人
      slist:[],
      // 审批人过滤空值
      slist1:[],
      show2:false,
    }
  },methods:{
    sureapprover(){
      let lst=[]
      for(var i=0;i<this.slist.length;i++){
        if(this.slist[i]){
          lst.push(this.slist[i])
        }
      }
      this.slist1=lst
      this.show2=false
    },
    selectid(val){
      this.slist.push(val["rid"])
      console.log(this.slist)
    },
    selectapprover(){
      this.show2=true
      myaxios("selectapprover","get").then(res=>{
        this.data1=res.list
        console.log(this.data1)
      })
    },
    changetime(mytime){
      const mydate = String(mytime).split(" ")
      // console.log(mydate[3],mydate[1],mydate[2])
      if(mydate[1]=="Jan"){
        mydate[1]="01"
      }else if(mydate[1]=="Feb"){
        mydate[1]="02"
      } else if(mydate[1]=="Mar"){
        mydate[1]="03"
      }else if(mydate[1]=="Apr"){
        mydate[1]="04"
      }else if(mydate[1]=="Mar"){
        mydate[1]="05"
      }else if(mydate[1]=="Jun"){
        mydate[1]="06"
      }else if(mydate[1]=="Jul"){
        mydate[1]="07"
      }else if(mydate[1]=="Aug"){
        mydate[1]="08"
      }else if(mydate[1]=="Sep"){
        mydate[1]="09"
      }else if(mydate[1]=="Oct"){
        mydate[1]="10"
      }else if(mydate[1]=="Nov"){
        mydate[1]="11"
      }else if(mydate[1]=="Dec"){
        mydate[1]="12"
      }
      let time = mydate[3] + "-" + mydate[1] + "-" + mydate[2]+' '+ mydate[4]
      return time
    },
    add(){
      let data = new FormData()
      if(this.slist1){
        data.append("idlist",JSON.stringify(this.slist1))
      }
      data.append("title",this.form.title)
      data.append("noticetype",this.form.noticetype)
      data.append("date",this.changetime(this.form.date))
      data.append("edate",this.changetime(this.form.edate))
      data.append("level",this.form.level)
      data.append("type",this.form.type)
      data.append("content",this.form.content)
      myaxios("Announcement","post",data).then(res=>{
        alert(res.msg)
      })
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
/deep/ .el-input__inner{
  width: 500px;
}
/*/deep/ .el-textarea__inner{*/
/*  */
/*}*/
element.style{
  margin-left: 0;
}
</style>